<template>
    <div class="app-container">
        <section class="spilt_cell">
            <div>进厂批次：{{receiveInfo.batchOrderCode}}</div>
            <div>共计：{{receiveInfo.all_bagCnt}}袋<span style="width: 20px;display: inline-block;"></span>共{{receiveInfo.allCars}}车</div>
            <div>物流单号：{{receiveInfo.code}}</div>
            <div>装车{{receiveInfo.carNumber}}：{{receiveInfo.sent_bagCnt}}袋</div>
            <div>物流司机：{{receiveInfo.createUserName}}</div>
            <div>实收：{{receiveInfo.received_bagCnt}}袋</div>
        </section>
        <div class="pd1020">进厂批次详情</div>
        <div class="pd1020">总数量：{{receiveInfo.allClothesCnt}}</div>
        <el-table :key='tableKey' :data="detailList" size="medium" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe>
            <el-table-column align="center" label="科室" prop="departmentName"></el-table-column>
            <el-table-column align="center" label="品类" prop="typeName"></el-table-column>
            <el-table-column align="center" label="小计" prop="clothesCnt"></el-table-column>
        </el-table>
    </div>
</template>

<script>
  import { fetchLogisOrder } from '@/api/logis'

  export default {
    name: 'ReceiveDetail',
    props: ['id'],
    data() {
      return {
        receiveInfo: {},
        detailList: [],
        tableKey: 0,
        listLoading: false
      }
    },
    created() {
      if (this.id || this.$route.query.id) {
        this.getInfo(this.id || this.$route.query.id)
        return
      }
      this.$message({ message: '参数错误，请返回重试', type: 'error', showClose: true })
    },
    watch: {
      id(val) {
        if (val) {
          this.getInfo(val)
        }
      },
      '$route.query.id'(val) {
        if (val) {
          this.getInfo(val)
        }
      }
    },
    methods: {
      getInfo(id) {
        this.listLoading = true
        fetchLogisOrder({ code: id }).then(response => {
          this.receiveInfo = response.data || {}
          this.detailList = response.data.batchDetail || []
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      }
    }
  }
</script>

<style scoped>
    .spilt_cell {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        height: 120px;
        padding: 0px 20px;
    }
    .spilt_cell div {
        display: inline-block;
        width: 50%;
        float: left;
        height: 35px;
        line-height: 35px;
    }
    .pd1020 {
        padding: 10px 20px;
    }
</style>
